<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能简历解析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f4f9;
        }

       .crawler-box {
            background-color: #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 20px;
            margin-bottom: 20px;
        }

       .resume-container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 20px;
        }

       .resume-section {
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }

       .resume-section:last-child {
            border-bottom: none;
        }
    </style>
</head>

<body class="p-8">
    <!-- 爬虫功能输入框 -->
    <div class="crawler-box">
        <h2 class="text-xl font-bold mb-4">简历爬取工具</h2>
        <form id="crawlForm">
            <input type="url" name="url" placeholder="输入简历网址" required
                class="w-full px-4 py-2 border border-gray-300 rounded mb-2">
            <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">爬取简历</button>
            <button type="button" onclick="resetResume()"
                class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 ml-2">显示我的简历</button>
        </form>
        <p id="message" class="text-red-500 mt-2"></p>
    </div>

    <!-- 简历展示区 -->
    <div class="resume-container">
        {% if is_crawled %}
            <!-- 显示爬取的简历 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
                <div>
                    <h1 class="text-3xl font-bold mb-2">{{ resume.basic_info.name }}</h1>
                    <p class="text-lg font-semibold">{{ resume.basic_info.position }}</p>
                </div>
                {% if resume.basic_info.photo %}
                <img src="{{ resume.basic_info.photo }}" alt="个人照片" class="w-32 h-32 rounded-md shadow-md">
                {% endif %}
            </div>

            <!-- 联系方式 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">联系方式</h2>
                <p><i class="fa-solid fa-phone mr-2"></i> 电话: {{ resume.basic_info.phone }}</p>
                <p><i class="fa-solid fa-envelope mr-2"></i> 邮箱: {{ resume.basic_info.email }}</p>
                {% if resume.basic_info.code_repo != '未提供' %}
                <p><i class="fa-brands fa-git-alt mr-2"></i> 代码仓库: <a href="{{ resume.basic_info.code_repo }}" target="_blank"
                        class="text-blue-500 hover:underline">{{ resume.basic_info.code_repo }}</a></p>
                {% endif %}
            </div>

            <!-- 教育背景 -->
            {% if resume.education %}
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">教育背景</h2>
                {% for edu in resume.education %}
                <div class="mb-4">
                    <p class="font-semibold">{{ edu.university }}</p>
                    <p class="text-gray-600">{{ edu.period }}</p>
                    {% if edu.courses %}
                    <ul class="list-disc pl-5 mt-2">
                        {% for course in edu.courses %}
                        <li>{{ course }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- 技能专长 -->
            {% if resume.skills %}
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">技能专长</h2>
                {% for category, skills in resume.skills.items() %}
                <h3 class="text-lg font-semibold mt-4">{{ category }}</h3>
                <ul class="list-disc pl-5">
                    {% for skill in skills %}
                    <li>{{ skill }}</li>
                    {% endfor %}
                </ul>
                {% endfor %}
            </div>
            {% endif %}

            <!-- 项目经验 -->
            {% if resume.projects %}
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">项目经验</h2>
                {% for project in resume.projects %}
                <div class="mb-4">
                    <h3 class="text-lg font-semibold">{{ project.name }}</h3>
                    <p class="text-gray-600">{{ project.period }}</p>
                    <p class="mt-2">{{ project.description }}</p>
                    {% if project.responsibility %}
                    <p class="mt-2">职责:</p>
                    <ul class="list-disc pl-5">
                        {% for resp in project.responsibility %}
                        <li>{{ resp }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- 获奖情况 -->
            {% if resume.awards %}
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">获奖情况</h2>
                <ul class="list-disc pl-5">
                    {% for award in resume.awards %}
                    <li>{{ award }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <!-- 自我评价 -->
            {% if resume.self_evaluation %}
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">自我评价</h2>
                {% for eval in resume.self_evaluation %}
                <p class="mt-2">{{ eval }}</p>
                {% endfor %}
            </div>
            {% endif %}

        {% else %}
            <!-- 显示我的默认简历 -->
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
                <div>
                    <h1 class="text-3xl font-bold mb-2">陈思毓</h1>
                    <p class="text-lg font-semibold">前端开发工程师</p>
                </div>
                <!-- 修改了图片路径，假设图片在当前目录下的images文件夹中 -->
                <img src="../resume_data_zhou/images/profile.jpg" alt="证件照" class="w-32 h-32 rounded-md shadow-md">
            </div>

            <!-- 联系方式 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">联系方式</h2>
                <p><i class="fa-solid fa-phone mr-2"></i> 电话: 17786995587</p>
                <p><i class="fa-solid fa-envelope mr-2"></i> 邮箱: csy1204_29@qq.com</p>
                <p><i class="fa-brands fa-gitee mr-2"></i> Gitee: <a href="https://gitee.com/cyusiyu" target="_blank"
                        class="text-blue-500 hover:underline">https://gitee.com/cyusiyu</a></p>
            </div>

            <!-- 教育背景 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">教育背景</h2>
                <p class="font-semibold">海南经贸职业技术学院 - 软件技术专业</p>
                <p class="text-gray-600">2023.09 - 2026.06</p>
                <ul class="list-disc pl-5 mt-2">
                    <li>Web前端开发</li>
                    <li>JavaScript高级编程</li>
                    <li>前端框架与应用</li>
                    <li>移动端开发</li>
                    <li>前端数据管理</li>
                </ul>
            </div>

            <!-- 技能专长 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">技能专长</h2>
                <h3 class="text-lg font-semibold">前端技术</h3>
                <ul class="list-disc pl-5">
                    <li>HTML5 & CSS3</li>
                    <li>JavaScript/ES6+</li>
                    <li>TypeScript</li>
                    <li>响应式设计</li>
                </ul>
                <h3 class="text-lg font-semibold mt-4">前端框架</h3>
                <ul class="list-disc pl-5">
                    <li>React.js</li>
                    <li>Vue.js</li>
                    <li>Next.js</li>
                    <li>Nuxt.js</li>
                </ul>
                <h3 class="text-lg font-semibold mt-4">开发工具</h3>
                <ul class="list-disc pl-5">
                    <li>Webpack/Vite</li>
                    <li>Git/GitHub</li>
                    <li>VS Code</li>
                    <li>Chrome DevTools</li>
                </ul>
                <h3 class="text-lg font-semibold mt-4">其他技能</h3>
                <ul class="list-disc pl-5">
                    <li>RESTful API</li>
                    <li>前端性能优化</li>
                    <li>单元测试</li>
                    <li>CI/CD基础</li>
                </ul>
            </div>

            <!-- 项目经验 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">项目经验</h2>
                <div class="mb-4">
                    <h3 class="text-lg font-semibold">学生管理系统前端开发</h3>
                    <p class="text-gray-600">2024.03 - 2024.08</p>
                    <p class="mt-2">该学生管理系统为学校提供全面的学生信息管理功能，包括学生档案管理、成绩管理等。前端界面需要与后端 API 交互，实现数据的实时展示和更新。</p>
                    <p class="mt-2">职责: 负责前端页面的设计与开发，优化数据交互流程，提高系统响应速度。参与系统的测试工作，修复发现的前端问题。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold">海南旅游网站开发</h3>
                    <p class="text-gray-600">2024.09 - 2024.12</p>
                    <p class="mt-2">海南旅游网站旨在为游客提供全面的海南旅游信息，包括景点介绍、酒店预订、旅游线路推荐等功能。需要实现响应式设计，以适应不同设备的访问。</p>
                    <p class="mt-2">职责: 参与网站的前端开发，使用 HBuilder X 进行页面搭建，实现景点详情页的动态数据展示和交互效果。负责优化页面加载速度。</p>
                </div>
            </div>

            <!-- 获奖情况 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">获奖情况</h2>
                <ul class="list-disc pl-5">
                    <li>2024年新生代理班主任</li>
                    <li>2024年优秀学生干部</li>
                    <li>2024年学院奖学金二等奖</li>
                </ul>
            </div>

            <!-- 自我评价 -->
            <div class="resume-section">
                <h2 class="text-xl font-bold mb-2">自我评价</h2>
                <p>作为一名充满激情的前端开发学习者，我具备扎实的 HTML/CSS/JavaScript 基础，熟悉 React 和 Vue 等主流框架。在校期间通过多个项目实践积累了丰富的开发经验，能够独立完成响应式网页开发和性能优化。</p>
                <p class="mt-2">我特别注重代码质量和用户体验，善于将设计转化为高效、优雅的代码实现。在团队合作中，我展现出良好的沟通能力和责任心，曾担任新生代理班主任并获得优秀学生干部称号。</p>
                <p class="mt-2">持续学习是我的座右铭，我定期关注前端技术动态，并通过 GitHub 等技术社区与同行交流。对前端工程化、性能优化和新兴技术充满探索热情，期待在实战项目中不断提升自己的技术水平。</p>
            </div>
        {% endif %}
    </div>

    <script>
        // AJAX提交爬取请求
        document.getElementById('crawlForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const messageEl = document.getElementById('message');
            messageEl.textContent = '正在爬取...';
            messageEl.className = 'text-blue-500 mt-2';

            try {
                const formData = new FormData(e.target);
                const response = await fetch('/crawl', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                if (result.success) {
                    window.location.href = result.redirect;
                } else {
                    messageEl.textContent = '爬取失败: ' + (result.error || '未知错误');
                    messageEl.className = 'text-red-500 mt-2';
                }
            } catch (error) {
                messageEl.textContent = '请求失败: ' + error.message;
                messageEl.className = 'text-red-500 mt-2';
                console.error('Error:', error);
            }
        });

        // 重置显示我的简历
        function resetResume() {
            fetch('/reset', { method: 'POST' })
              .then(() => window.location.href = '/')
              .catch(err => {
                  console.error(err);
                  document.getElementById('message').textContent = '重置失败: ' + err.message;
                  document.getElementById('message').className = 'text-red-500 mt-2';
              });
        }
    </script>
</body>
</html>